/*!
 * GwAdmin Development v1.2.0
 * (c) 2018-2018 Gwzh
 * build in: 2018-12-6 14:13:30
 */

'use strict';

var _typeof = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? function(obj) { return typeof obj } : function(obj) { return obj && typeof Symbol === 'function' && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj };

/*!
 toolbar.js
 */

layui.define(['jquery', 'layer', 'helper'], function(e) {
  var _layui = layui;
  var $ = _layui.jquery;
  var layer = _layui.layer;
  var util = layui.helper;
  var debug = layui.hint();

  var Default = {
    limit: 2, // 显示按钮的个数 + 1，比如写了 2 , 那么还有一个触发事件的按钮，所以共有 3 个
    data : [
      /* {
        text: '修改', // 按钮的文案
        title: '修改数据',
        icon: 'layui-icon-edit', // 按钮的图标的 className
        className: 'layui-btn-warm', // 按钮的额外样式，默认为 "layui-btn layui-btn-xs"
        layEvent: 'del'
      }*/
    ],
    behavior: { // 当前模板的全局配置
      spacing  : true, // {boolean|string}: normal, compact(紧凑)
      title    : true, // {boolean}
      className: 'layui-btn layui-btn-xs', // {string}
      icon     : true, // {boolean|string}: 可以写公用的图标类名，比如 'layui-icon', 那么在每一个data，就可以不用添加 layui-icon
      text     : true // {boolean}
    }
  };

  var css = '\n    .layui-table-GW-tool-panel {\n      padding: 5px 0;\n      min-width: 150px;\n      border: 1px solid #d2d2d2;\n      text-align: left;\n      background-color: #fff;\n      box-shadow: 0 2px 4px rgba(0,0,0,.12);\n    }\n    .layui-table-GW-tool-panel li {\n      padding: 0 10px;\n      line-height: 30px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      -webkit-transition: .5s all;\n      transition: .5s all;\n    }\n  ';
  util.styleInject(css);

  var Toolbar = function Toolbar() {
    this.v = '1.0.0';
    this.config = Default;
  };

  /**
   * 处理传入的参数
   * @param {object|array} option
   * @returns { data:[], behavior: {}}
   * @example
   *  var data = { text, icon, className, layEvent }
   *  var behavior = { spacing, title, className, icon, text }
   *  a. data
   *  b. [data, data, data, ...]
   *  c. { data, behavior }
   */
  Toolbar.prototype.optionFactory = function(option) {
    var optionType = typeof option === 'undefined' ? 'undefined' : _typeof(option);
    var limit = this.config.limit;
    var behavior = this.config.behavior;
    var data = this.config.data;
    if (optionType === 'object' && option != null) {
      if ('limit' in option) {
        limit = $.isNumeric(option.limit) ? Number(option.limit) : 0;
        limit = limit <= 2 ? 2 : limit;
      }

      if ('behavior' in option) {
        $.extend(behavior, option.behavior);
      }

      if ('data' in option) {
        $.extend(data, option.data);
      } else {
        data = $.isArray(option) ? option : [option];
      }
    } else {
      debug.error('传入的数据类型有误，要求是 { object | array }');
      return false;
    }
    return {
      limit   : limit,
      behavior: behavior,
      data    : data
    };
  };

  Toolbar.prototype.render = function(option) {
    var config = this.optionFactory(option);
    this.config = config;
    var data = config.data;
    var behavior = config.behavior;
    var limit = config.limit;

    var dataLen = data.length;
    var getText = function getText(item, isMore) {
      var ret = [];

      ret.push('<a');
      // title 属性配置
      behavior.title && ret.push(' title="' + (item.title || item.text) + '"');
      // class 属性配置
      if (behavior.className) {
        var itemClass = typeof behavior.className === 'boolean' ? '' : behavior.className;
        itemClass += isMore ? ' layui-btn-fluid' : '';
        if ('className' in item) {
          itemClass += ' ' + item.className;
        }
        ret.push(' class="' + itemClass + '"');
        itemClass = ''; // 回收
      }
      // event 属性配置
      if ('layEvent' in item) {
        ret.push(' lay-event="' + item.layEvent + '"');
      }

      ret.push('>');

      // icon 属性配置
      if (behavior.icon) {
        var itemIcon = typeof behavior.icon === 'boolean' ? '' : behavior.icon;
        if ('icon' in item) {
          itemIcon += ' ' + item.icon;
        }
        ret.push('<i class="' + itemIcon + '"></i>');
        itemIcon = ''; // 回收
      }
      // text 属性配置
      if (isMore) {
        ret.push(item.text || item.title);
      } else {
        behavior.text && ret.push(item.text);
      }

      ret.push('</a>');

      return ret.join('');
    };

    var nodeText = '';
    if (dataLen <= limit) {
      for (var i = 0; i < dataLen; i++) {
        nodeText += getText(data[i]);
      }
    } else {
      for (var _i = 0; _i < limit; _i++) {
        nodeText += getText(data[_i]);
      }

      nodeText += '<a title="更多操作" class="layui-btn layui-btn-xs" table-toolbar-event="LAYTABLE_GW_MORE"><i class="layui-icon layui-icon-more"></i></a>';

      nodeText += '<ul class="layui-table-GW-tool-panel layui-hide">';

      for (var _i2 = limit; _i2 < dataLen; _i2++) {
        nodeText += '<li>' + getText(data[_i2], true) + '</li>';
      }

      nodeText += '</ul>';
    }

    // spacing 属性配置
    if (behavior.spacing === 'compact') {
      nodeText = '<div class="layui-btn-group layui-group-xs">' + nodeText;
      nodeText += '</div>';
    }

    return '<div>' + nodeText + '</div>';
  };

  $(document).on('click', '*[table-toolbar-event="LAYTABLE_GW_MORE"]', function(e) {
    var $this = $(this);
    var $target = $this.parent().find('.layui-table-GW-tool-panel');

    if ($this.hasClass('layui-btn-disabled')) {
      return false;
    }

    var findParent = function findParent($item) {
      var $p = $item.parent();
      if ($p[0]) {
        if ($p.hasClass('layui-table-cell') || $p.hasClass('layui-table-tips-main')) {
          return $p;
        } else {
          return findParent($p);
        }
      } else {
        return null;
      }
    };
    var $parent = findParent($this);
    if (!$parent[0]) return false;
    layer.closeAll('tips');
    layer.tips($target.prop('outerHTML') + '<i class="layui-icon layui-table-tips-c layui-icon-close"></i>', $parent[0], {
      tips     : [1, ''],
      tipsMore : true,
      time     : -1,
      anim     : -1,
      maxWidth : $parent.width() / 2,
      isOutAnim: false,
      skin     : 'layui-table-tips',
      success  : function success(layero, index) {
        var $panel = layero.find('.layui-table-GW-tool-panel');
        $panel.removeClass('layui-hide');
        var panelHeight = $panel.height();
        var originTop = parseInt(layero.css('top'));
        $this.attr('disabled', true).addClass('layui-btn-disabled');

        layero.css('top', originTop - panelHeight + 5 + 'px');
        layero.find('.layui-table-tips-c').on('click', function() {
          $panel.addClass('layui-hide');
          layer.close(index);
        });

        layero.find('[lay-event]').on('click', function() {
          var $self = $(this);
          var event = $self.attr('lay-event');
          $parent.find('[lay-event="' + event + '"]').trigger('click');
        });
      },
      end: function end() {
        $this.removeAttr('disabled').removeClass('layui-btn-disabled');
      }
    });
  });

  e('toolbar', new Toolbar());
});
